<template>
	<div class="adminMain">
		<div v-loading="android.load.load">
			<div class="h3">安卓版本<span @click="detailFunction('show', -1, 'android')">添加版本</span></div>
			<el-table :data="android.tableData" border>
				<el-table-column prop="version_no" label="版本号" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="content" label="更新内容" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.content || "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="渠道" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.channel_info.title || "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="下载地址" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.url || "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="状态" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.status ? '✔' : '-' }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="时间" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.created_at || "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<div class="tableBtn">
							<a @click="detailFunction('show', scope.$index, 'android')">修改</a>
							<el-popconfirm title="确定删除吗？" @confirm="deleteItem(scope.row.id, 'android')">
								<a slot="reference" style="color:#999;">删除</a>
							</el-popconfirm>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="paginationBlock">
				<el-pagination layout="prev, pager, next, sizes, total" @size-change="getAndroidList" @current-change="getAndroidList" :total="android.total" :current-page.sync="android.page" :page-size.sync="android.limit" ></el-pagination>
			</div>
		</div>
		<div v-loading="ios.load.load">
			<div class="h3" style="margin-top: 40px;">苹果版本<span @click="detailFunction('show', -1, 'ios')">添加版本</span></div>
			<el-table :data="ios.tableData" border>
				<el-table-column prop="version_no" label="版本号" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="content" label="更新内容" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.content || "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="渠道" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.channel_info.title || "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="下载地址" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.url || "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="状态" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.status ? '✔' : '-' }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="时间" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.row.created_at || "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<div class="tableBtn">
							<a @click="detailFunction('show', scope.$index, 'ios')">修改</a>
							<el-popconfirm title="确定删除吗？" @confirm="deleteItem(scope.row.id, 'ios')">
								<a slot="reference" style="color:#999;">删除</a>
							</el-popconfirm>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="paginationBlock">
				<el-pagination layout="prev, pager, next, sizes, total" @size-change="getIosList" @current-change="getIosList" :total="ios.total" :current-page.sync="ios.page" :page-size.sync="ios.limit" ></el-pagination>
			</div>
		</div>
		
		<!-- 详情弹窗 -->
		<el-dialog title="提示" :visible.sync="detail.show" width="550px" :close-on-click-modal="false">
			<el-form label-position="top" v-if="detail.data">
				<el-form-item label="系统" required>
					<el-input :value="detail.data.type === 1 ? 'android' : 'ios'" disabled></el-input>
				</el-form-item>
				<el-form-item label="版本号" required>
					<el-input v-model="detail.data.version_no" :disabled="detail.data.id ? true : false"></el-input>
				</el-form-item>
				<el-form-item label="更新内容" required>
					<el-input v-model="detail.data.content" type="textarea" rows="3"></el-input>
				</el-form-item>
				<el-form-item label="下载地址" required>
					<el-input v-model="detail.data.url"></el-input>
				</el-form-item>
				<el-form-item label="渠道" required>
					<el-select v-model="detail.data.channel_id" placeholder="请选择">
						<el-option :label="item.title" :value="item.id" v-for="(item, index) in channel_list"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态" required>
					<el-switch v-model="detail.data.status"></el-switch>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detail.show = false;">取 消</el-button>
				<el-button type="primary" @click="detailFunction('post')" :loading="detail.load.load">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// ios
				ios: {
					// 是否处于加载中
					load: { load: false },
					
					// 表格数据
					tableData: [],
					
					// 当前页数
					page: 1,
					
					// 每页条数
					limit: this.app.limit,
					
					// 总数
					total: 0,
				},
				
				// 安卓
				android: {
					// 是否处于加载中
					load: { load: false },
					
					// 表格数据
					tableData: [],
					
					// 当前页数
					page: 1,
					
					// 每页条数
					limit: this.app.limit,
					
					// 总数
					total: 0,
				},
				
				// 详情
				detail: {
					show: false,
					load: {load:false},
					data: null
				},
				
				// 渠道列表
				channel_list: [],
				
			};
		},
		methods: {
			
			// 详情弹窗
			detailFunction(type, index, system){
				let _this = this;
				if(type == "show"){
					let data = {
						type: system === "android" ? 1 : 2,
						version_no: index === -1 ? "" : (system === "android" ? _this.android.tableData[index].version_no : _this.ios.tableData[index].version_no),
						content: index === -1 ? "" : (system === "android" ? _this.android.tableData[index].content : _this.ios.tableData[index].content),
						url: index === -1 ? "" : (system === "android" ? _this.android.tableData[index].url : _this.ios.tableData[index].url),
						status: index === -1 ? true : (system === "android" ? _this.android.tableData[index].status : _this.ios.tableData[index].status),
						channel_id: index === -1 ? "" : (system === "android" ? _this.android.tableData[index].channel_id : _this.ios.tableData[index].channel_id),
					}
					
					if(index !== -1){
						data.id = (system === "android" ? _this.android.tableData[index].id : _this.ios.tableData[index].id);
					}
					_this.detail.data = data;
					_this.detail.show = true;
					_this.detailFunction("getChannel");
				}else if(type == "post"){
					_this.app.ajax({
						url: "/admin/version/update",
						method: "POST",
						load: _this.detail.load,
						data: _this.detail.data,
						success(res){
							_this.detail.show = false;
							if(_this.detail.data.type === 1){
								_this.getAndroidList();
							}else{
								_this.getIosList();
							}
							_this.$notify({title: "提示",message: res.msg, type: "success"});
						}
					})
				}
			},
			
			// 删除更新
			deleteItem(id, type){
				let _this = this;
				_this.app.ajax({
					url: "/admin/version/del",
					method: "POST",
					load: type === "android" ? _this.android.load : _this.ios.load,
					data: { id },
					success(res){
						if(type === "android"){
							_this.getAndroidList();
						}else{
							_this.getIosList();
						}
						_this.$notify({title: "提示",message: res.msg, type: "success"});
					}
				})
			},
			
			// 获取安卓列表
			getAndroidList(){
				let _this = this;
				_this.app.ajax({
					url: "/admin/version/android",
					method: "POST",
					data: {
						limit: _this.android.limit,
						page: _this.android.page,
					},
					load: _this.android.load,
					success(res){
						_this.android.total = res.data.total;
						_this.android.tableData = res.data.list;
					}
				});
			},
			
			// 获取IOS列表
			getIosList(){
				let _this = this;
				_this.app.ajax({
					url: "/admin/version/ios",
					method: "POST",
					data: {
						limit: _this.ios.limit,
						page: _this.ios.page,
					},
					load: _this.ios.load,
					success(res){
						_this.ios.total = res.data.total;
						_this.ios.tableData = res.data.list;
					}
				});
			},
			
			// 获取渠道列表
			getChannelList(){
				let _this = this;
				_this.app.ajax({
					url: "/admin/channel/index",
					method: "POST",
					data: { limit: 9999 },
					success(res){
						_this.channel_list = res.data.list;
					}
				})
			},
			
		},
		mounted(){
			this.getAndroidList();
			this.getIosList();
			this.getChannelList();
		}
	};
</script>

<style lang="scss" scoped>
	.adminMain{
		.h3{
			line-height: 30px;
			font-size: 17px;
			font-weight: 300;
			margin-bottom: 13px;
			span{
				font-size: 15px;
				margin-left: 25px;
				color: $background;
				cursor: pointer;
				vertical-align: middle;
				display: inline-block;
				margin-top: -2px;
			}
		}
		.smallH3{
			line-height: 30px;
			font-size: 15px;
			font-weight: 300;
			margin-bottom: 13px;
			span{
				margin-left: 25px;
				color: $background;
				cursor: pointer;
			}
		}
	}
</style>